﻿<!doctype html>
<html lang="en">
<head>
    <title>LineChart - Table as DataSource</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="%description%" />
    <meta name="keywords" content="" />
    <meta name="author" content="ComponentOne" />
    <link href="../base-reset.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/Aristo/jquery-ui-1.8.4.custom.css" rel="stylesheet" type="text/css" />
    <link href="../demos-single.css" rel="stylesheet" type="text/css" />
    <script src="../../external/jquery-1.4.3.min.js" type="text/javascript"></script>
    <script src="../../external/jquery-ui-1.8.6.custom.min.js" type="text/javascript"></script>
    <script src="../../external/jquery.glob.min.js" type="text/javascript"></script>
    <script src="../../external/raphael.js" type="text/javascript"></script>
    <script src="../../external/raphael-popup.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.ui.wijchartcore.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.ui.wijlinechart.js" type="text/javascript"></script>
    <script id="scriptInit" type="text/javascript">
    	$(document).ready(function () {
    	    $("#tb").wijlinechart({ width: 600, height: 300,
    	        showChartLabels: false,
    	        hint: {
    	            formatter: function () {
    	                return this.y;
    	            },
    	            offset: 10
    	        },
				 seriesStyles: [
					{ stroke: "#00A0B0", "stroke-width": "3" },
					{ stroke: "#CC333F", "stroke-width": "3" },
					{ stroke: "#EB6841", "stroke-width": "3" },
					{ stroke: "#EDC951", "stroke-width": "3" }
				],
                axis: {
                    y: {
                    },
                    x: {
                        labels: {
                            style: {
                                rotation: -45
                            }
                        },
                        tickMajor: { position: "outside", style: { stroke: "#999999"} }
                    }
                }
    		});
    	});
    </script>
</head>
<body class="demo-single">
    <div class="container">
        <div class="header">
            <h2>
                Table as DataSource</h2>
        </div>
        <div class="main demo">
            <!-- Begin demo markup -->
            <table id="tb" border="1">
                <caption>
                    Hardware Sales by Category</caption>
                <thead>
                    <tr>
                        <td>
                        </td>
                        <th>
                            Desktops
                        </th>
                        <th>
                            Notebooks
                        </th>
                        <th>
                            Tablets
                        </th>
                        <th>
                            Phones
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">
                            Q1
                        </th>
                        <td>
                            64594.6
                        </td>
                        <td>
                            32760.69
                        </td>
                        <td>
                            62973.35
                        </td>
                        <td>
                            23432.04
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">
                            Q2
                        </th>
                        <td>
                            74933.4
                        </td>
                        <td>
                            25261.26
                        </td>
                        <td>
                            39395.51
                        </td>
                        <td>
                            41129.49
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">
                            Q3
                        </th>
                        <td>
                            39269.73
                        </td>
                        <td>
                            17746.36
                        </td>
                        <td>
                            20775.42
                        </td>
                        <td>
                            16430.82
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">
                            Q4
                        </th>
                        <td>
                            55709.52
                        </td>
                        <td>
                            19976.28
                        </td>
                        <td>
                            39878.09
                        </td>
                        <td>
                            18992.22
                        </td>
                    </tr>
                </tbody>
            </table>
            <!-- End demo markup -->
            <div class="demo-options">
                <!-- Begin options markup -->
                <!-- End options markup -->
            </div>
        </div>
        <div class="footer demo-description">
            <p>
                The wijlinechart supports to use table element as datasource.</p>
        </div>
    </div>
</body>
</html>
